<template>
  <div v-show="props.compType === 'userList'" class="userList">
    <MyTabs>
      <template #1>
        <el-form-item label="ID">
          <el-tooltip
            class="item"
            effect="dark"
            content="请注意,ID的修改可能会导致该组件相关事件失效！"
            placement="left"
          >
            <el-input v-model="props.id" class="input" />
          </el-tooltip>
        </el-form-item>
        <AssociatedFieldKey :props="props" />
        <el-form-item label="标题">
          <el-input v-model="props.label" class="input" />
        </el-form-item>
        <el-form-item label="默认值">
          <el-input v-model="props.value" class="input" />
        </el-form-item>
        <el-form-item label="提示符">
          <el-input v-model="props.placeholder" placeholder="请输入提示符" />
        </el-form-item>
        <el-form-item label="字段值">
          <el-input v-model="props.dval" />
        </el-form-item>
        <el-form-item label="字段名称">
          <el-input v-model="props.dlabel" />
        </el-form-item>
        <el-form-item label="后缀">
          <el-input v-model="props.append" />
        </el-form-item>
      </template>
      <template #2>
        <el-form-item label="栅格">
          <el-input-number v-model="props.span" :min="1" :max="24" />
        </el-form-item>
        <el-form-item label="标签宽度">
          <el-input-number v-model="props.labelWidth" :min="1" :max="200" />
        </el-form-item>
        <el-form-item label="表格高度">
          <el-input-number
            v-model="props.height"
            :step="10"
            :max="1500"
            :min="100"
          />
        </el-form-item>
      </template>
      <template #3>
        <el-form-item label="显示标签">
          <el-switch v-model="props.showLabel" />
        </el-form-item>
        <el-form-item label="必填">
          <el-switch v-model="props.required" />
        </el-form-item>
        <el-form-item label="禁用">
          <el-switch v-model="props.disabled" />
        </el-form-item>
        <el-form-item label="多选">
          <el-switch v-model="props.multi" />
        </el-form-item>
        <el-form-item label="显示序号">
          <el-switch v-model="props.showIndex" /> </el-form-item
      ></template>
    </MyTabs>
  </div>
</template>
<script>
import MyTabs from "../../component/tabs";
import AssociatedFieldKey from "../../component/associatedFieldKey";

export default {
  name: "user-list-config",
  props: {
    props: {},
  },
  components: { MyTabs, AssociatedFieldKey },

  data() {
    return {
      activePanel: "1",
      colOptions: [],
      dLabel: "",
      dProperty: "",
      dWidth: 150,
      dShow: true,
      alertShow: false,
      propertyExistShow: false,
      activeName: "first",
    };
  },
  watch: {
    colOptions(newVal) {
      this.props.colConf = JSON.stringify(newVal);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.colOptions = this.colOptions.concat(JSON.parse(this.props.colConf));
    });
  },
  methods: {
    addColItem() {
      if (this.dLabel !== "" && this.dProperty !== "") {
        const existOptions = this.colOptions.find(
          (item) => item.property === this.dProperty
        );
        if (typeof existOptions === "undefined") {
          this.alertShow = false;
          this.propertyExistShow = false;
          const obj = {};
          obj.index = this.colOptions.length;
          obj.show = this.dShow;
          obj.label = this.dLabel;
          obj.property = this.dProperty;
          obj.width = this.dWidth;
          this.colOptions.push(obj);
          this.resetFields();
        } else {
          this.propertyExistShow = true;
        }
      } else {
        this.alertShow = true;
      }
    },
    resetFields() {
      this.dLabel = "";
      this.dProperty = "";
      this.dWidth = 150;
      this.dShow = true;
    },
    handlerDeleteRow(row) {
      // eslint-disable-next-line eqeqeq
      const index = this.colOptions.findIndex(
        (item) => item.property == row.property
      );
      this.colOptions.splice(index, 1);
    },
  },
};
</script>
